@color1: rgb(233, 28, 45);
@color2: gray;

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection1 {
  margin-top: 15%;
  margin-left: 36%;
  text-align: left;

  .name {
    color: rgb(0, 175, 206);
    font-size: 0.38rem;
  }

  .tip1 {
    color: @color1;
    font-size: 0.26rem;
    margin-bottom: 0.5em;
  }

  .sale {
    font-size: 0.25rem;
    display: flex;
    line-height: 2em;
    color: @color2;
  }

  .data {
    flex: 1;
    text-align: right;
    margin-right: 1.5em;
    color: black;
    font-size: 0.32rem;
  }
}

.center1 {
  margin-left: 7%;
  width: 94%;
}

.center2 {
  margin-left: 1%;
  width: 100%;
}

.center {
  margin-top: 2em;

  .selection2 {
    text-align: center;
    color: @color2;

    .data {
      color: @color1;
      font-size: 0.5rem;
      font-weight: bold;
    }

    .data2 {
      background-color: @color1;
      border-radius: 1em;
      line-height: 1.8em;
      margin: auto;
      color: white;
      width: 13em;
    }
  }

  .selection3 {
    display: flex;
    margin-top: 2em;
    padding: 0 5%;
    font-size: 0.25rem;
    text-align: left;
    color: @color2;
    overflow: hidden;

    .flex1 {
      display: flex;
      flex: 1;

      &:last-child {
        justify-content: flex-end;
      }

      img {
        max-width: 2.2em;
        max-height: 2.2em;
        align-self: center;
        margin-right: 0.5em;
      }
    }

    .flex2 {
      display: flex;
      flex-direction: column;
    }

    .data {
      font-size: 0.35rem;
      line-height: 1em;
      color: black;
    }
  }

  .selection4 {
    margin-top: 4em;
    color: white;
    text-align: center;

    .tip1 {
      .data {
        color: rgb(248, 229, 21);
        font-size: 1.3em;
      }
    }

    .tip2 {
      font-size: 0.25rem;
      margin-top: 0.2em;
    }
  }
}

.icon {
  color: #eee;
  height: 100%;
}

.modalTask {
  background-size: 100% 90%;
  background-repeat: no-repeat;
  width: 92% !important;

  :global {
    .am-modal-content {
      background-color: transparent;
    }

    .am-modal-footer {
      text-align: center;

      *:active, *:focus, *:link, *:visited, *:hover {
        background-color: transparent;
      }

    }

    .am-modal-button-group-v .am-modal-button {
      border-top: none;
    }
  }
}

.modalType1 {
  background-image: url("../../assets/modal3.png");
}

.modalType2 {
  background-image: url("../../assets/modal4.png");
}

.modalType3 {
  background-image: url("../../assets/modal6.png");

  .header .selection {
    width: 25%;
  }
}

.modalType4 {
  background-image: url("../../assets/modal5.png");

  .header .selection {
    width: 27%;
  }
}

.header {
  position: absolute;
  right: 8.5%;
  top: 0;
  width: 100%;
  text-align: right;

  .selection {
    display: inline-block;

    &:first-child {
      margin-right: 1%;
    }
  }
}
